<template>
  <!--  通过ref获取html元素 宽高必须设置 -->
  <div ref="info" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import { onMounted, ref, inject, watchEffect } from "vue";

// 通过inject使用echarts
const echarts = inject("echarts");

// 通过ref获取html元素
const info = ref();

// 接收传入的参数
const props = defineProps({
  legend: Object,
  series: Object
});

onMounted(() => {
  // 渲染echarts的父元素
  var infoEl = info.value;

  // 初始化echarts
  var userEc = echarts.init(infoEl, "light");

  // 指定图表的配置项和数据
  var option = {
    legend: props.legend, // 使用传入的legend配置项
    series: [props.series] // 使用传入的series配置项
  };
// 监听数据变化 重新渲染
watchEffect(() => {
  var infoEl = info.value;
  var userEc = echarts.init(infoEl, "light");
  var option = {
    legend: props.legend,
    series: [props.series]
  };
  userEc.setOption(option);
});
  // 使用刚指定的配置项和数据显示图表。
  userEc.setOption(option);
});

</script>
